<template>
  <Breadcrumb>
    <Breadcrumb-item href="/">首页</Breadcrumb-item>
    <Breadcrumb-item v-for="item in names" :key="item">{{item}}</Breadcrumb-item>
  </Breadcrumb>
</template>

<script>
  export default {
    data() {
      return {
        names: this.$route.name.split(':')
      }
    },
    methods: {
      getRouterNames() {
        this.names = this.$route.name.split(':')
      }
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      "$route": "getRouterNames"
    }
  }
</script>

<style>

</style>